<template>
  <!-- 表格 -->
  <div style="padding: 20px">
    <el-button type="primary" style="margin-bottom: 12px" @click="addClick">新增轮播</el-button>
    <el-table :data="list" border style="width: 100%">
      <el-table-column fixed prop="id" label="序号" align="center" width="150" />
      <el-table-column prop="pic_url" label="轮播图" align="center">
        <template slot-scope="scope">
          <img style="width: 70px" :src="scope.row.pic_url" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="province" label="跳转链接" align="center">
        <template> ### </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序值" align="center" />
      <el-table-column prop="created_at" label="添加时间" align="center" />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="medium ">编辑</el-button>
          <el-button style="color:red" type="text" size="medium " @click="deleThis(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增和编辑共用的表单 -->
    <el-dialog @close="form = {
      pic_url: '',
      link: '',
      sort: ''
    }" :title="isEdit ? '编辑轮播' : '新增轮播'" :visible.sync="dialogFormVisible" width="650px">

      <el-form :rules="rules" ref="addForm" status-icon :model="form" label-width="80px">
        <el-form-item label="轮播图" prop="pic_url">
          <el-input v-model="form.pic_url" />
        </el-form-item>
        <el-form-item label="跳转链接" prop="link">
          <el-input v-model="form.link" />
        </el-form-item>
        <el-form-item label="排序值" prop="sort">
          <el-input v-model="form.sort" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { getRotationList, addRotation, deleteRotation, editRotation } from "@/api/rotation";


export default {
  name: "BannerSwiper",
  data() {
    return {
      list: [],
      tableData: { page: 1, limit: 100 },
      dialogFormVisible: false,//diglog弹框的显隐
      form: {
        pic_url: '',
        link: '',
        sort: ''
      },
      isEdit: false,//判断编辑还是新增的标识
      rules: {
        pic_url: [{ required: true, trigger: 'blur', message: '请输入图片地址' }],
        link: [{ required: true, trigger: 'blur', message: '请输入跳转链接' }],
        sort: [{ required: true, trigger: 'blur', message: '请输入排序值' }],
      }
    };
  },
  methods: {
    //获取轮播图
    async getList() {
      let res = await getRotationList(this.tableData);
      this.list = res.data.list;
    },
    //点击新增按钮
    addClick() {
      this.isEdit = false;
      this.dialogFormVisible = true
    },
    //删除轮播
    deleThis(id) {
      this.$confirm('此操作将永久删除该轮播图, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteRotation({ id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //新增或者编辑轮播图
    sub() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          //添加还是编辑
          if (this.isEdit) {
            //编辑
            await editRotation(this.form);
            this.$message({
              message: '成功编辑',
              type: 'success'
            });
          } else {
            await addRotation(this.form);
            this.$message({
              message: '成功添加',
              type: 'success'
            });
          }
          this.dialogFormVisible = false;
          //列表数据更新
          this.getList();
          //双向绑定的数据清空
          this.form = {
            pic_url: '',
            link: '',
            sort: ''
          }
        }
      })
    },
    //编辑轮播
    handleClick(row) {
      this.dialogFormVisible = true;
      this.isEdit = true;
      //数据回溯
      this.form = {
        pic_url: row.pic_url,
        link: row.link,
        sort: row.sort,
        id: row.id
      }
    }
  },
  async created() {
    this.getList()
  },
};
</script>

<style scoped lang="less">

</style>